<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端事件处理</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        html,
        body {
            height: 500%;
            background: -webkit-linear-gradient(top left, lightblue, rgb(238, 171, 83));
        }

        .box {
            width: 100px;
            height: 100px;
            background: #DDD;
            transition: transform 1s;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        /*
         知识点：
         @1 在苹果手机上进行滑动，往往会触发页面默认的滚动行为「边界反弹效果」，一般我们需要禁止其默认行为！！但是这样的行为，也会禁止掉页面在手指滑动中的“滚动条”滚动效果！！
         @2 元素.addEventListener(事件,方法,?)
           ?可以是true/false：控制哪个阶段触发
           ?可以是对象：
             capture:false 设置为true，则在捕获阶段触发「false是冒泡阶段」
             once:false 设置为true后，事件只绑定一次「触发一次自动移除事件绑定」
             passive:false 设置为true后，则方法中不能在基于preventDefault阻止默认行为了
         @3 新版本谷歌浏览器，把window/document/body的touch相关事件，的passive都默认设置为了true「禁止阻止默认行为」
         */
    </script>

    <script>
        /*
        如果移动端，我们依然基于click事件做处理，就要想办法解决其300ms延迟的问题 
           fastclick.js
           原理：基于事件委托（委托给BODY），把click替换为touch处理！！
        */
    </script>

    <script>
        /*
        移动端事件和PC端事件是有区别的
           @1 mousexxx和keyxxx事件，在移动端几乎都不兼容
               + mousexxx会被touch/gesture手指事件来代替
               + keyxxx会被input事件代替
                 inpBox.onkeydown=function(){...}
                 inpBox.oninput=function(){...}//监听文本框内容输入事件
            @2 click事件在移动端和pc端是不一样的
               + PC端：click是点击事件，连续快速点击多次，触发多次事件（dblclick是双击）
               + 移动端：click是'单击'事件，每一次点击过后，都要等待300ms，看一下是否触发第二次点击，如果没有第二次操作，才算单击，才会把click触发执行！！所以：click在移动端有300ms延迟问题！！
            @3 剩下的一些事件（例如：load、scroll、resize、blur...)，PC和移动端基本都有！！

        移动端有自己的专属时间
            @1 单手指事件模型 touch
               + touchstart 手指按下
               + touchmove 手指移动
               + touchend 手指离开
               + touchcancel 操作取消
            @2 多手指事件模型 gesture
               + gesturestart


         专业的事件库中，不仅仅有对点击操作的封装，还有对滑动、长按、缩放等多种行为操作的封装！！ 
           + zepto.js
           + hammer.js  http://hammerjs.github.io/api/
           + ...

         zepto被“誉为”移动端的JQ！
           + 正常情况下，JQ咋用，它就咋用，语法几乎一模一样！！
           + 如果遇到某个方法JQ能用，但是ZP不能用，那就说明ZP没有（因为其只实现JQ最常用的方法）！！
           + 不考虑IE内核浏览器的兼容，体积比JQ小很多！！
           + ZP支持移动端事件(它对移动端事件做了很多的封装)，而这些是JQ不具备的！！
             tap 点击
             singleTap 单击
             doubleTap 双击
             longTap 长按「750ms」
             swipe 滑动
             swipeLeft/Right/Down/Up 滑动方向的事件
             pinchIn/Out 缩放
             ...
         */
    </script>
<script src="./js/fastclick.js"></script>
    <!-- <script>
        //原理：基于事件委托，再基于touch事件模型，委托给body，当用户发生点击后他内部封装了方法来解决300ms延迟
        FastClick.attach(document.body);

        const box = document.querySelector('.box');
    

        //手指按下记录手指起始位置
        box.ontouchstart=function(ev){
            // changedTouches/touches:记录每一根手指，在屏幕中的位置（touches在touchend中将不存在，所以我们一般都用changedTouches）
          let point=ev.changedTouches[0];//取出这个手指的坐标位置
          this.startX=point.clientX;
          this.startY=point.clientY;
          this.isMove=false;

        }
        //手指移动：记录手指最新位置（不是触发move就算移动，我们要判断误差值（一般是10px））
        box.ontouchmove=function(ev){
        let point=ev.changedTouches[0];
        this.changeX=point.clientX-this.startX;
        this.changeY=point.clientY-this.startY;
        if(Math.abs(this.changeX)>10||Math.abs(this.changeY)>10){
         this.isMove=true;
        }
        }
        //手指离开：判断是点击还是移动了
        box.ontouchend=function(ev){
           if(!this.isMove){
            //点击
            this.style.transform='rotate(360deg)';
            return;
           }
           //滑动了
        }
    </script> -->
</body>
<script src="js/zepto.min.js"></script>
<script>
    /*
    Zepto:被称之为移动端的jquer
    */
</script>

<script>
    /*
    在移动端，如果我们自己有滑动行为处理，我们会把文档的默认行为禁掉 
       + 默认设置了passive:禁止阻止默认行为
    */ 
   document.addEventListener('touchmove',function(ev){
     ev.preventDefault();
   },{
    passive:false
   })
</script>
</html>